<style lang="less">
.boxs {
  float: left;
  border: 1px solid #ffffff;
}
.I {
  border-right: 1px solid #e4e4e4;
  float: left;
  height: 120px;
  margin-right: 20px;
}
.ico-box {
  color: #f90;
  width: 100px;
  height: 100px;
  background: #eee;
  line-height: 100px;
  text-align: center;
  border-radius: 50%;
  margin-right: 20px;
  margin-top: 10px;
}
.kj-box {
  // line-height: 115px;
  p {
    font-size: 18px;
    span {
      color: #ed4014;
    }
  }
}
.vdio-box {
  width: 240px;
  text-align: center;
}
.kjsj-box {
  font-size: 18px;
  span {
    color: #ed4014;
  }
}
.canvasbox{
  width: 240px;
  height: calc(~'100% - 98px');
  position: absolute;
  top: 81px;
  right: 16px;
}
.ballBox {
  width: 440px;
  overflow: hidden;
  float: left;
  margin-left: 30px;
}
.i-box {
  height: 32px;
  width: 500px;
  p {
    font-size: 18px;
    span {
      color: #ed4014;
    }
  }
}
.ball {
  width: 40px;
  height: 40px;
  float: left;
  border-radius: 50%;
  font-size: 26px;
  text-align: center;
  line-height: 40px;
  color: #fff;
  margin: 2px;
}
.ivu-table-cell {
  padding-left: 0px;
  padding-right: 0px;
}
.ivu-table-small td {
    height: 20px;
}
.ball-blue {
  background: #57a3f3;
}
.bball {
  border-radius: 50%;
  color: #fff;
  background: #57a3f3;
  position: relative;
  z-index: 1;
}
.svgz{
  position: absolute;
  top: 12px;
  left: 0px;
  width: 95px;
  height: 24px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><line x1="0" y1="0" x2="100%" y2="100%" stroke="#57a3f3" stroke-width="2"/></svg>');
}
.svgf{
  position: absolute;
  top: 12px;
  left: 0px;
  width: 95px;
  height: 24px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><line x1="100%" y1="0" x2="0" y2="100%" stroke="#57a3f3" stroke-width="2"/></svg>');
}
.ball-red {
  background: #ed4014;
}
.c-hd {
  float: right;
}
.ivu-table .demo-table-info-row td {
  background-color: #2db7f5;
  color: #fff;
}
.ivu-table .demo-table-error-row td {
  background-color: #ff6600;
  color: #fff;
}
.ivu-table td.demo-table-info-column {
  background-color: #2db7f5;
  color: #fff;
}
.ivu-table .demo-table-info-cell-name {
  background-color: #ed4014;
  color: #fff;
}
.ivu-table .demo-table-info-cell-name-no {
  background-color: #fbff00;
  color: #ed4014;
}
.ivu-table .demo-table-info-cell-age {
  background-color: #ff6600;
  color: #fff;
}
.ivu-table .demo-table-info-cell-address {
  background-color: #187;
  color: #fff;
}
.ivu-table .odd-table-info-cell-name {
}
.ivu-table .odd-table-info-cell-name-no {
  color: #e2e2e2;
}
.ivu-table-cell{
  font-size: 16px;
}
</style>

<template>
  <div>
    <Row :gutter="20">
      <i-Col span="24">
        <Card style="height:154px">
          <div class="boxs">
            <div class="ico-box">
              <i class="icon iconfont icon-kuaile"
                 style="font-size: 90px;"></i>
            </div>
          </div>
          <div class="I"></div>
          <div class="boxs">
            <div class="i-box">
              <p style="float: left;">第<span>{{data[data.length - 1].issue}}</span> 期开奖号码,下期开奖倒计时：</p>
              <oc-Countdown style="float: left;"
                            v-if="hackReset"
                            v-bind:startTime="data[data.length - 1].next_open_timestamp"
                            v-bind:endTime="data[data.length - 1].next_open_timestamp"
                            endText="开奖中..."
                            dayTxt="天"
                            hourTxt="小时"
                            minutesTxt="分钟"
                            secondsTxt="秒"></oc-Countdown>
            </div>
            <div class="ballBox">
              <div v-if="data[data.length - 1].h"
                   v-for="(time, index) in data[data.length - 1].h"
                   :key="index"
                   :class="'ball '+(time <= 40 ?'ball-blue':'ball-red')">{{time}}</div>
            </div>
          </div>
          <div class="I"
               style="margin-left: 20px;"></div>
          <div class="boxs"
               style="line-height: 56px;line-height: 125px;width: 260px;text-align: center;">
            <Button shape="circle"
                    icon="ios-play"
                    @click="modal5 = true">播放开奖视频</Button>
          </div>
        </Card>
      </i-Col>
      <i-Col span="14">

      </i-Col>
    </Row>
    <Row :gutter="20">
      <i-Col span="24"
             style="margin-top:10px">
        <Card style="height:56px">
          <span>走势：</span>
          <Button :type="zs === 'jb' ? 'info' : 'dashed'"
                  size="small"
                  style="margin-left: 10px;"
                  @click="zs = 'jb'">基本走势</Button>
          <Button :type="zs === 'zh' ? 'info' : 'dashed'"
                  size="small"
                  style="margin-left: 10px;"
                  @click="zs = 'zh'">综合走势</Button>
          <!-- <span style="margin-left: 20px;">设置：</span>
          <Dropdown trigger="custom" :visible="visible" style="margin-left: 20px">
            <a href="javascript:void(0)" @click="handleOpen">
                遗漏设置
                <Icon type="ios-arrow-down"></Icon>
            </a>
            <DropdownMenu slot="list">
                <p>
                  <Checkbox v-model="single.je">奇偶</Checkbox>
                  <Checkbox v-model="single.sx">上下</Checkbox>
                </p>
                <div style="text-align: right;margin:10px;">
                    <Button type="primary" @click="handleClose">关闭</Button>
                </div>
            </DropdownMenu>
          </Dropdown> -->
        </Card>
      </i-Col>
    </Row>
    <Row :gutter="20">
      <i-Col span="24"
             style="margin-top:5px">
        <Card style="height:56px">
          <span>查询：</span>
          <Button :type="tiaos === 30 ? 'primary' : 'dashed'"
                  size="small"
                  style="margin-left: 10px;"
                  @click="tiaos = 30;getHistory()">近30期</Button>
          <Button :type="tiaos === 50 ? 'primary' : 'dashed'"
                  size="small"
                  style="margin-left: 10px;"
                  @click="tiaos = 50;getHistory()">近50期</Button>
          <Button :type="tiaos === 100 ? 'primary' : 'dashed'"
                  size="small"
                  style="margin-left: 10px;"
                  @click="tiaos = 100;getHistory()">近100期</Button>
          <!-- <Button size="small" style="margin-left: 10px;" >
                自定义查询
                <Icon type="ios-arrow-forward" />
              </Button> -->
          <Button type="primary"
                  size="small"
                  style="margin-left: 10px;"
                  @click="cxgd">查询更多</Button>
          (当前显示共：{{data.length}}期，最多不能超过1000期)
          <p class="c-hd"
             v-if="JSON.stringify(userInfo) !== '{}' && userInfo.role_id === 1">您的点卡有效期截止到：
            <span style="color: #ff9900;">{{typeof cardExpire!=='object'?cardExpire:cardExpire.expire}}</span>
          </p>
        </Card>
      </i-Col>
    </Row>
    <Row :gutter="20"
         style="margin-top:5px">
      <i-Col span="24">
        <Card>
          <Table size="small"
                 v-show="zs === 'jb'"
                 :columns="columns"
                 :data="data"
                 border></Table>
          <Table size="small"
                 v-show="zs === 'zh'"
                 :columns="columns2"
                 :data="data"
                 border></Table>
          <div class="canvasbox" v-show="zs === 'zh'">
            <div v-for="(item, index) in datagvg"
                 :key="index"
                 :style="{
                  top: (index * 24)+12+index+'px',
                  width: item.w,
                  left: item.l
                 }"
                 :class="item.z"></div>
          </div>
          <p style="text-align: center;line-height: 40px;color: #f02d2d;">您已到达最底部，请不要继续往下滑了</p>
        </Card>
      </i-Col>
    </Row>
    <Modal v-model="modal5"
           title="开奖视频"
           width="1158">
      <div style="height:730px">
        <iframe src="https://kj.kai861.com/view/video/bjkl8Video/index.html?10014?1682018.cn"
                width="100%"
                scrolling="no"
                height="100%"
                frameborder="0"></iframe>
      </div>
    </Modal>
  </div>
</template>
<script src="../../libs/anijs-min.js"></script>
<script>
import kaile from '@/assets/images/kaile8.jpg'
export default {
  name: 'kl8',
  components: {
  },
  data () {
    return {
      hackReset: true,
      single: {
        je: false,
        sx: false
      },
      visible: false,
      zs: 'jb',
      datagvg:[],
      modal5: false,
      userInfo: {},
      cardExpire: '',
      gth_x: 0,
      data: [
        {
          kaile: '',
          issue: '',
          next_issue: '',
          next_open_time: "",
          next_open_timestamp: 1534467900,
          issue: '',
          h: [],
          sum: 0,
          tail: '',
          sum810: 0,
          up: 0,
          upM: 0,
          among: 0,
          down: 0,
          downM: 0,
          odd: 0,
          oddM: 0,
          and: 0,
          even: 0,
          evenM: 0,
          cp: {
            s: '',
            sp: ''
          },
          cellClassName: {
            sum810: '',
            among: '',
            and: '',
            oddM: '',
            evenM: '',
            upM: '',
            downM: ''
          }
        }
      ],
      setData: [],
      tiaos: 30,
      columns2: [
        {
          title: '期号',
          key: 'issue',
          align: 'center',
          render: (h, params) => {
            return h('div', {}, params.row.issue)
          }
        },
        {
          title: '开奖号',
          key: 'h',
          align: 'center',
          width: 420,
          render: (h, params) => {
            return h('div', {
              style: {
                fontSize: '12px'
              }
            }, [
              h('span', {
                style: {
                  color: '#fff'
                }
              }, params.row.h.map(function (e,index) {
                if (e <= 40) {
                  return h('div', {
                    style: {
                      float: 'left',
                      width: '18px',
                      height: '18px',
                      borderRadius: '50%',
                      background: '#2d8cf0',
                      margin: '1px',
                      marginRight:index===9?'18px':'1px',
                      textAlign: 'center'
                    }
                  }, e)
                }
                if (e > 40) {
                  return h('div', {
                    style: {
                      float: 'left',
                      width: '18px',
                      height: '18px',
                      borderRadius: '50%',
                      background: '#ed4014',
                      margin: '1px',
                      marginRight:index===9?'18px':'1px',
                      textAlign: 'center'
                    }
                  }, e)
                }
              }))
            ])
          }
        },
        {
          title: '和值',
          key: 'sum',
          align: 'center',
          render: (h, params) => {
            return h('div', {}, params.row.sum)
          }
        },
        {
          title: '奇偶比例',
          key: '',
          align: 'center',
          render: (h, params) => {
            return h('div', {}, [
              h('span', {}, params.row.odd),
              h('span', {
                style: {
                marginLeft: '5px',
                marginRight: '5px'
              }
            }, ':'),
              h('span', {}, params.row.even)
            ])
          }
        },
        {
          title: '上下比例',
          key: '',
          align: 'center',
          render: (h, params) => {
            return h('div', {}, [
              h('span', {}, params.row.up),
              h('span', {
                style: {
                  marginLeft: '5px',
                  marginRight: '5px'
                }
              }, ':'),
                h('span', {}, params.row.down)
            ])
          }
        },
        {
          title: '和值尾号',
          align: 'center',
          children: [
            {
              title: '0',
              key: '',
              width: 24,
              align: 'center',
              render: (h, params) => {
                if (params.row.tail === '0') {
                  return h('div', {
                    'class': {
                      bball: true
                    }
                  }, params.row.tail)
                } else {
                  return h('div', {}, '')
                }
              }
            },
            {
              title: '1',
              key: '',
              width: 24,
              align: 'center',
              render: (h, params) => {
                if (params.row.tail === '1') {
                  return h('div', {
                    'class': {
                      bball: true
                    }
                  }, params.row.tail)
                } else {
                  return h('div', {}, '')
                }
              }
            },
            {
              title: '2',
              key: '',
              width: 24,
              align: 'center',
              render: (h, params) => {
                if (params.row.tail === '2') {
                  return h('div', {
                    'class': {
                      bball: true
                    }
                  }, params.row.tail)
                } else {
                  return h('div', {}, '')
                }
              }
            },
            {
              title: '3',
              key: '',
              width: 24,
              align: 'center',
              render: (h, params) => {
                if (params.row.tail === '3') {
                  return h('div', {
                    'class': {
                      bball: true
                    }
                  }, params.row.tail)
                } else {
                  return h('div', {}, '')
                }
              }
            },
            {
              title: '4',
              key: '',
              width: 24,
              align: 'center',
              render: (h, params) => {
                if (params.row.tail === '4') {
                  return h('div', {
                    'class': {
                      bball: true
                    }
                  }, params.row.tail)
                } else {
                  return h('div', {}, '')
                }
              }
            },
            {
              title: '5',
              key: '',
              width: 24,
              align: 'center',
              render: (h, params) => {
                if (params.row.tail === '5') {
                  return h('div', {
                    'class': {
                      bball: true
                    }
                  }, params.row.tail)
                } else {
                  return h('div', {}, '')
                }
              }
            },
            {
              title: '6',
              key: '',
              width: 24,
              align: 'center',
              render: (h, params) => {
                if (params.row.tail === '6') {
                  return h('div', {
                    'class': {
                      bball: true
                    }
                  }, params.row.tail)
                } else {
                  return h('div', {}, '')
                }
              }
            },
            {
              title: '7',
              key: '',
              width: 24,
              align: 'center',
              render: (h, params) => {
                if (params.row.tail === '7') {
                  return h('div', {
                    'class': {
                      bball: true
                    }
                  }, params.row.tail)
                } else {
                  return h('div', {}, '')
                }
              }
            },
            {
              title: '8',
              key: '',
              width: 24,
              align: 'center',
              render: (h, params) => {
                if (params.row.tail === '8') {
                  return h('div', {
                    'class': {
                      bball: true
                    }
                  }, params.row.tail)
                } else {
                  return h('div', {}, '')
                }
              }
            },
            {
              title: '9',
              key: '',
              width: 24,
              align: 'center',
              render: (h, params) => {
                if (params.row.tail === '9') {
                  return h('div', {
                    'class': {
                      bball: true
                    }
                  }, params.row.tail)
                } else {
                  return h('div', {}, '')
                }
              }
            },
          ]
        },
      ],
      columns: [
        {
          title: '期号',
          key: 'issue',
          align: 'center',
          render: (h, params) => {
            return h('div', {}, params.row.issue)
          }
        },
        {
          title: '总和',
          key: 'sum',
          align: 'center',
          render: (h, params) => {
            return h('div', {}, params.row.sum)
          }
        },
        {
          title: '奇偶盘',
          align: 'center',
          children: [
            {
              title: '奇偶比例',
              key: '',
              align: 'center',
              render: (h, params) => {
                return h('div', {}, [
                  h('span', {}, params.row.odd),
                  h('span', {
                    style: {
                      marginLeft: '5px',
                      marginRight: '5px'
                    }
                  }, ':'),
                  h('span', {}, params.row.even)
                ])
              }
            },
            {
              title: '奇',
              key: 'oddM',
              align: 'center',
              render: (h, params) => {
                return h('div', {}, params.row.oddM)
              }
            },
            {
              title: '偶',
              key: 'evenM',
              align: 'center',
              render: (h, params) => {
                return h('div', {}, params.row.evenM)
              }
            },
            {
              title: '和',
              key: 'and',
              align: 'center',
              render: (h, params) => {
                return h('div', {}, params.row.and)
              }
            }
          ]
        },
        {
          title: '上下盘',
          align: 'center',
          children: [
            {
              title: '中',
              key: 'among',
              align: 'center',
              render: (h, params) => {
                return h('div', {}, params.row.among)
              }
            },
            {
              title: '上',
              key: 'upM',
              align: 'center',
              render: (h, params) => {
                return h('div', {}, params.row.upM)
              }
            },
            {
              title: '下',
              key: 'downM',
              align: 'center',
              render: (h, params) => {
                return h('div', {}, params.row.downM)
              }
            },
            {
              title: '上下比例',
              key: '',
              align: 'center',
              render: (h, params) => {
                return h('div', {}, [
                  h('span', {}, params.row.up),
                  h('span', {
                    style: {
                      marginLeft: '5px',
                      marginRight: '5px'
                    }
                  }, ':'),
                  h('span', {}, params.row.down)
                ])
              }
            }
          ]
        },
        {
          title: '总和属性',
          align: 'center',
          children: [
            {
              title: '总和大小',
              key: '',
              align: 'center',
              render: (h, params) => {
                switch (true) {
                  case params.row.sum > 810:
                    return h('div', {
                      style: {
                        // color: '#ed4014'
                      }
                    }, '大')
                  case params.row.sum < 810:
                    return h('div', {
                      style: {
                        // color: '#2b85e4'
                      }
                    }, '小')
                  case params.row.sum === 810:
                    return h('div', {
                      style: {
                        // color: '#19be6b'
                      }
                    }, '和')
                }
              }
            },
            {
              title: '总和单双',
              key: '',
              align: 'center',
              render: (h, params) => {
                switch (true) {
                  case params.row.sum === 810:
                    return h('div', {
                      style: {
                        // color: '#ed4014'
                      }
                    }, '')
                  case params.row.sum % 2 === 0:
                    return h('div', {
                      style: {
                        // color: '#ed4014'
                      }
                    }, '双')
                  case params.row.sum % 2 !== 0:
                    return h('div', {
                      style: {
                        // color: '#2b85e4'
                      }
                    }, '单')
                }
              }
            },
            {
              title: '组合属性',
              key: '',
              align: 'center',
              render: (h, params) => {
                if (params.row.sum === 810) {
                  return h('div', {
                    style: {
                      // color: '#ed4014'
                    }
                  }, '')
                } else {
                  return h('div', {
                    style: {
                      // color: '#2b85e4'
                    }
                  }, params.row.cp.s + params.row.cp.sp)
                }
              }
            }
          ]
        }
      ]
    }
  },
  computed: {
    timeOut: {
      set (val) {
        this.$store.state.app.compileTimeout = val
      },
      get () {
        return this.$store.state.app.compileTimeout
      }
    },
  },
  methods: {
    init () {
      let data = [
        { open_number: "04,08,20,23,24,31,32,37,39,41,42,52,57,62,64,65,66,74,76,80+00" },
      ]
    },
    setzs () {

    },
    cxgd () {
      if (this.data.length <= 1000){
        let data = {
          limit: `${this.setData.length},${this.tiaos}`,
          order_param: 'open_timestamp',
          time_column_name: 'open_time',
          where_param: 'gid=1'
        }

        this.$api.repeater(this, 'getHistory', data).then(res => {
          if (res.code === 1) {
            this.setData.unshift(...res.msg.records.reverse())
            this.data = this.sum(this.setData)
            // console.log(this.setData)
            this.datagvg = this.getindex()

          } else if (res.code === 2) {
            if (res.msg === '没有购买点卡') {
            }
            this.$Notice.error({
              title: res.msg
            })
            this.$router.push({ path: '/home' })
          }
          // console.log(res)
        })
      } else {
        this.$Notice.error({
          title: '不能显示超过1000期'
        });
      }
    },
    zscolumns () {
      if (this.zs === 'jb') return this.columns
      if (this.zs === 'zh') return this.columns2
    },
    getindex () {
      let d = []
      for(let i = 0;i<this.data.length;i++){
        if (this.data[i+1]) {
          let w = parseInt(this.data[i+1].tail) - parseInt(this.data[i].tail)
          d.push({
            w: Math.abs(w)*24+'px',
            z: w < 0 ? 'svgf' : 'svgz',
            l: w < 0 ? Math.abs(parseInt(this.data[i+1].tail))*24+12+'px' : Math.abs(parseInt(this.data[i].tail))*24+12+'px'
          })
        }
      }

      return d
    },
    handleOpen () {
      this.visible = true;
    },
    handleClose () {
      this.visible = false;
    },
    gth () {
      let _this = this
      if (this.$store.state.app.messageCount === 1) {
        let data = {
          limit: `0,1`,
          order_param: 'open_timestamp',
          time_column_name: 'open_time',
          where_param: 'gid=1'
        }
        this.$api.repeater(this, 'getHistory', data).then(res => {
          if (res.code === 1) {
            if (res.msg.records[0].issue === this.setData[this.setData.length - 1].issue) {

            } else {

              this.setData.push(res.msg.records[0])
              this.data = this.sum(this.setData)
            }
          } else if (res.code === 2) {
            this.$Notice.error({
              title: res.msg
            })
            this.$router.push({ path: '/home' })
          }
          // console.log(res)
        })

        this.timeOut = setTimeout(() => {
          _this.hackReset = false
          _this.$nextTick(() => {
            _this.hackReset = true
          })
          _this.gth()
        }, 5000);
      } else {
        this.timeOut = '';
      }
    },
    getHistory () {
      let data = {
        limit: `0,${this.tiaos}`,
        order_param: 'open_timestamp',
        time_column_name: 'open_time',
        where_param: 'gid=1'
      }

      this.$api.repeater(this, 'getHistory', data).then(res => {
        if (res.code === 1) {
          this.data = this.sum(res.msg.records.reverse())
          this.datagvg = this.getindex()
          this.setData = res.msg.records
          if (this.gth_x === 0) {
            this.$store.commit('setMessageCount', 1);
            this.gth()
            this.gth_x = 1
          }
          // console.log(this.data)
        } else if (res.code === 2) {
          if (res.msg === '没有购买点卡') {
          }
          this.$Notice.error({
            title: res.msg
          })
          this.$router.push({ path: '/home' })
        }
        // console.log(res)
      })
    },
    sum (arr) {
      console.time('数据转换速度：')
      let data = []
      for (let j = 0, len1 = arr.length; j < len1; j++) {
        let h = arr[j].open_number.substring(0, arr[j].open_number.length - 3).split(',')
        data[j] = {
          issue: arr[j].issue,
          next_issue: arr[j].next_issue,
          next_open_time: arr[j].next_open_time,
          next_open_timestamp: arr[j].next_open_timestamp,
          h: h,
          sum: 0,
          tail: '',
          sum810: 0,
          up: 0,
          upM: 0,
          among: 0,
          down: 0,
          downM: 0,
          odd: 0,
          oddM: 0,
          and: 0,
          even: 0,
          evenM: 0,
          cp: {
            s: '',
            sp: ''
          },
          cellClassName: {
            sum: '',
            sum810: '',
            among: '',
            and: '',
            oddM: '',
            evenM: '',
            upM: '',
            downM: ''
          }
        }
        for (let i = 0, len2 = h.length; i < len2; i++) {
          data[j].sum += parseInt(h[i])
          if (h[i] <= 40) {
            data[j].up += 1
          } else {
            data[j].down += 1
          }
          if (h[i] % 2 === 0) {
            data[j].even += 1
          } else {
            data[j].odd += 1
          }
        }
        data[j].tail = data[j].sum.toString().substr(data[j].sum.toString().length-1,1)
        if (data[j].sum === 810) {
          data[j].sum810 = '810'
          data[j].cellClassName.sum810 = 'demo-table-info-cell-name'
          data[j].cellClassName.sum = 'demo-table-info-cell-name'
        } else {
          j === 0 || data[j - 1].sum810 === '810' ? data[j].sum810 = 1 : data[j].sum810 = data[j - 1].sum810 + 1
          data[j].cellClassName.sum810 = 'demo-table-info-cell-name-no'
        }

        if (data[j].up - data[j].down === 0) {
          data[j].among = '中'
          data[j].cellClassName.among = 'demo-table-info-cell-name'
        } else {
          j === 0 || data[j - 1].among === '中' ? data[j].among = 1 : data[j].among = data[j - 1].among + 1
          data[j].cellClassName.among = 'demo-table-info-cell-name-no'
        }

        if (data[j].odd - data[j].even === 0) {
          data[j].and = '和'
          data[j].cellClassName.and = 'demo-table-info-cell-name'
        } else {
          j === 0 || data[j - 1].and === '和' ? data[j].and = 1 : data[j].and = data[j - 1].and + 1
          data[j].cellClassName.and = 'demo-table-info-cell-name-no'
        }

        if (data[j].odd > data[j].even) {
          data[j].oddM = '奇'
          data[j].even = '0' + data[j].even
          data[j].cellClassName.oddM = 'odd-table-info-cell-name'
        } else {
          j === 0 || data[j - 1].oddM === '奇' ? data[j].oddM = 1 : data[j].oddM = data[j - 1].oddM + 1
          data[j].cellClassName.oddM = 'odd-table-info-cell-name-no'
        }

        if (data[j].even > data[j].odd) {
          data[j].evenM = '偶'
          data[j].odd = '0' + data[j].odd
          data[j].cellClassName.evenM = 'odd-table-info-cell-name'
        } else {
          j === 0 || data[j - 1].evenM === '偶' ? data[j].evenM = 1 : data[j].evenM = data[j - 1].evenM + 1
          data[j].cellClassName.evenM = 'odd-table-info-cell-name-no'
        }

        if (data[j].up > data[j].down) {
          data[j].upM = '上'
          data[j].down = '0' + data[j].down
          data[j].cellClassName.upM = 'odd-table-info-cell-name'
        } else {
          j === 0 || data[j - 1].upM === '上' ? data[j].upM = 1 : data[j].upM = data[j - 1].upM + 1
          data[j].cellClassName.upM = 'odd-table-info-cell-name-no'
        }

        if (data[j].down > data[j].up) {
          data[j].downM = '下'
          data[j].up = '0' + data[j].up
          data[j].cellClassName.downM = 'odd-table-info-cell-name'
        } else {
          j === 0 || data[j - 1].downM === '下' ? data[j].downM = 1 : data[j].downM = data[j - 1].downM + 1
          data[j].cellClassName.downM = 'odd-table-info-cell-name-no'
        }

        if (data[j].sum === 810) {
          data[j].cp.s = '810'
          data[j].cp.sp = '810'
        } else {
          if (data[j].sum > 810) data[j].cp.s = '大'
          if (data[j].sum < 810) data[j].cp.s = '小'
          if (data[j].sum % 2 === 0) data[j].cp.sp = '双'
          if (data[j].sum % 2 !== 0) data[j].cp.sp = '单'
        }
      }
      console.timeEnd('数据转换速度：')
      return data
    },
    getCardExpire () {
      this.$api.repeater(this, 'getCardExpire').then(res => {
        if (res.code === 1) {
          this.cardExpire = res.msg
          sessionStorage.cardExpire = JSON.stringify(res.msg)
        } else {
          this.cardExpire = res.msg
        }
      })
    }
  },
  mounted () {
    this.init()
    this.getCardExpire()
    if (sessionStorage.cardExpire !== undefined) {
      this.cardExpire = JSON.parse(sessionStorage.cardExpire)
    }
  },
  created () {
    this.userInfo = JSON.parse(sessionStorage.userInfoDtat)
    this.kaile = kaile
    this.getHistory()
  }
}
</script>
